<template xmlns="http://www.w3.org/1999/html">
    <webLayout>
        <template v-slot:header>
            <div class="home-hd-lt">
                <div class="home-hd-lt__tilte">星座卡(VCC)</div>
                <div class="home-hd-lt__info">
                    企业级虚拟信用卡
                </div>
                <div class="home-hd-lt__info" style="margin-top: 0px;">
                    付达全球，笔笔畅通
                </div>
            </div>
            <div class="home-hd-rt"></div>
        </template>
        <div class="main">
            <div class="main-bg1"></div>
            <div class="main-option">
                <!--<div class="main-bg2"></div>
                <div class="main-bg3"></div>
                <div class="main-bg4"></div>
                <div class="main-bg5"></div>-->
                <div class="main-option__title">
                    线上场景无限制
                </div>
                <div class="main-option__info">
                    简易建卡，灵活使用
                </div>
                <div class="option_con">
                    <img src="../../assets/image/web/card_1.png" class="con_image">
                    <!--<div class="con_left">
                        <div class="con_left_title" style="margin-top: 280px">
                            同名账户，让贸易更简单
                        </div>
                        <div class="con_left_detail">
                            注册实名即生成中国香港银行账户，轻松开启
                        </div>
                    </div>
                    <div class="con_right">

                    </div>-->
                </div>
                <div class="main-option__title" style="margin-top: 100px;">
                    企业消费管理更清晰
                </div>
                <div class="option_con" style="margin-top: 50px; margin-bottom: 50px; overflow: hidden">
                    <div class="con_item" style="float: left">
                        <div style="overflow: hidden">
                            <div class="item_title">创建便于管<br/>理的子账户</div>
                            <div class="item_detail">01</div>
                        </div>
                        <div class="item_c">
                            <img src="../../assets/image/web/card_2.png" style="margin-top: 110px">
                        </div>
                    </div>
                    <div class="con_item" style="float: left; margin-left: 3.5%;">
                        <div style="overflow: hidden">
                            <div class="item_title">消费好控制<br/>成本更清晰</div>
                            <div class="item_detail">02</div>
                        </div>
                        <div class="item_c">
                            <img src="../../assets/image/web/card_4.png" style="margin-top: 90px">>
                        </div>
                    </div>
                    <div class="con_item" style="float: right">
                        <div style="overflow: hidden">
                            <div class="item_title">建户无限制<br/>操作更便捷</div>
                            <div class="item_detail">03</div>
                        </div>
                        <div class="item_c">
                            <img src="../../assets/image/web/card_3.png">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </webLayout>
</template>

<script setup>
    import webLayout from "./components/webLayout.vue";
</script>

<style lang="scss" scoped>

    .home-hd-lt {
        position: absolute;
        top: 250px;
        left: 0px;
        z-index: 40;
        .home-hd-lt__tilte {
            max-width: 585px;
            line-height: 100px;
            font-weight: 600;
            font-size: 65px;
            color: #fff;
            line-height: 81px;
        }
        .home-hd-lt__info {
            font-size: 24px;
            color: #ffffff;
            margin-top: 40px;
            max-width: 725px;
            height: 66px;
        }
    }

    .home-hd-rt {
        width: 700px;
        height: 390px;
        background: url("../../assets/image/web/card_bg.png") center center no-repeat;
        background-size: 90% 100%;
        position: absolute;
        top: 210px;
        right: 0px;
        z-index: 40;
    }

    .main {
        position: relative;
        .main-bg1 {
            width: 1753px;
            height: 1040px;
            background: url("../../assets/image/web/main-bg.png") center center;
            background-size: 100% 100%;
            position: absolute;
            top: 459px;
            right: 0;
            z-index: 1;
        }
    }

    .main-option {
        position: relative;
        width: 1440px;
        margin-left: -720px;
        left:50%;
        z-index: 10;
        .main-bg2 {
            width: 482px;
            height: 468px;
            background: url("../../assets/image/web/star1.png") no-repeat center;
            background-size: 80% 80%;
            position: absolute;
            top: 489px;
            left: -176px;
        }
        .main-bg3 {
            width: 381px;
            height: 370px;
            background: url("../../assets/image/web/star2.png") no-repeat center;
            background-size: 80% 80%;
            position: absolute;
            top: 385px;
            left: 0px;
        }
        .main-bg4 {
            width: 271px;
            height: 272px;
            background: url("../../assets/image/web/star3.png") no-repeat center;
            background-size: 60% 55%;
            position: absolute;
            top: 20px;
            left: 940px;
        }
        .main-bg5 {
            width: 156px;
            height: 157px;
            background: url("../../assets/image/web/star4.png") no-repeat center;
            background-size: 80% 60%;
            position: absolute;
            top: 0;
            left: 1063px;
        }
        .main-option__title {
            width: 813px;
            font-size: 64px;
            color: #000000;
            line-height: 84px;
            margin: 0 auto;
            text-align: center;
            margin-top: 14px;
        }
        .main-option__info {
            width: 813px;
            height: 85px;
            font-weight: 400;
            font-size: 28px;
            color: #666666;
            line-height: 43px;
            margin: 0 auto;
            text-align: center;
            margin-top: 40px;
        }
        .option_con{
            width: 1440px;
            position: relative;
            left: 50%;
            margin-left: -720px;
            overflow: hidden;
            .con_image{
                width: 100%;
            }
            .con_item{
                width: 31%;
                border-radius: 20px;
                background: #fff;
                padding: 50px;
                text-align: center;
                min-height: 600px;
                .item_title{
                    font-size: 38px;
                    line-height: 50px;
                    font-weight: bold;
                    float: left;
                    width: 60%;
                }
                .item_detail{
                    margin-top: 20px;
                    font-size: 100px;
                    font-weight: bold;
                    line-height: 40px;
                    color: #333;
                    text-align: right;
                    float: right;
                    width: 40%
                }
                .item_c{
                    margin-top: 20px;
                    img{width: 100%;}
                }
            }
            .con_left{
                width: 50%;
                float: left;
                .con_left_title{
                    font-size: 42px;
                    line-height: 70px;
                    font-weight: bold;
                }
                .con_left_detail{
                    margin-top: 20px;
                    font-size: 24px;
                    line-height: 40px;
                }
            }
            .con_right{
                width: 50%;
                float: left;
                height: 780px;
                background: url("../../assets/image/web/account_1.png") no-repeat center;
                background-size: 100%;
            }
            .con_right_shop{
                width: 50%;
                float: left;
                height: 320px;
                background: url("../../assets/image/web/account_2.png") no-repeat center;
                background-size: 60%;
            }
            .con_right_hl{
                width: 50%;
                float: left;
                height: 900px;
                background: url("../../assets/image/web/account_3.png") no-repeat center;
                background-size: 95%;
            }
        }

        .main-option__card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 60px;
            .main-option__card-item {
                width: 425px;
                height: 289px;
                background: #ffffff;
                box-shadow: 7px 13px 40px 0px rgba(41, 26, 204, 0.12);
                border-radius: 8px;
                padding: 46px;
                .main-option__card-item__icon {
                    width: 80px;
                    height: 80px;
                }
                .main-option__card-item__title {
                    font-size: 29px;
                    color: #4a4a4a;
                    line-height: 39px;
                    margin-top: 25px;
                }
                .main-option__card-item__text {
                    font-size: 21px;
                    color: #9b9b9b;
                    line-height: 29px;
                    margin-top: 13px;
                }
                &:hover {
                    background: #7d3aea;
                    .main-option__card-item__title {
                        color: #fff;
                    }
                    .main-option__card-item__text {
                        color: #fff;
                    }
                }
            }
        }
    }

    .main-user {
        position: relative;
        width: 1440px;
        margin-left: -720px;
        left:50%;
        margin-top: 197px;
        z-index: 10;
        .main-user__title {
            width: 813px;
            font-size: 64px;
            color: #000000;
            line-height: 84px;
            margin: 0 auto;
            text-align: center;
            margin-top: 14px;
        }
        .main-user__info {
            width: 813px;

            font-weight: 400;
            font-size: 28px;
            color: #666666;
            line-height: 43px;
            margin: 0 auto;
            text-align: center;
            margin-top: 40px;
        }
        .main-user__card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 60px;
            .main-user__card-item {
                width: 425px;
                height: 662px;
                background: #ffffff;
                box-shadow: 7px 13px 40px 0px rgba(41, 26, 204, 0.12);
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                .main-user__card-item__icon {
                    flex: 1;
                }
                .main-user__card-item__title {
                    height: 86px;
                    font-size: 34px;
                    color: #333333;
                    line-height: 48px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
    .main-secure {
        position: relative;
        width: 1440px;
        margin-left: -720px;
        left:50%;
        margin-top: 197px;
        z-index: 10;
        .main-secure__title {
            width: 813px;
            font-size: 64px;
            color: #000000;
            line-height: 84px;
            margin: 0 auto;
            text-align: center;
            margin-top: 14px;
        }
        .main-secure__card {
            margin-top: 83px;
            .main-secure__card-item {
                width: 100%;

                display: flex;
                position: relative;
                .main-secure__card-item__icon {
                    width: 50%;
                    height: 548px;
                }
                .main-secure__card-item__wp {
                    width: 50%;
                    height: 548px;
                    display: flex;
                    flex-direction: column;
                    padding-top: 160px;
                    padding-left: 100px;
                    padding-right: 100px;
                    .main-secure__card-item__title {
                        font-size: 72px;
                        color: #333333;
                        line-height: 126px;
                    }
                    .main-secure__card-item__info {
                        font-size: 18px;
                        color: #000000;
                        line-height: 33px;
                        margin-top: 44px;
                        font-weight: bold;
                    }
                    .main-secure__card-item__line {
                        width: 22px;
                        height: 5px;
                        background: #5e3db3;
                        border-radius: 3px;
                        margin-top: 102px;
                    }
                }
                .main-secure__card-item__box {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translateY(-50%) translateX(-50%);

                    width: 168px;
                    height: 155px;
                    background: #7d3aea;
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    .main-secure__card-item__box__title {
                        font-size: 24px;
                        color: #ffffff;
                        line-height: 33px;
                    }
                    .main-secure__card-item__box__line {
                        width: 22px;
                        height: 5px;
                        background: rgba(255, 255, 255, 0.3);
                        border-radius: 3px;
                    }
                }
            }
        }
    }
</style>
